<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dom</title>
  <style>

  </style>
</head>

<body>
  <!-- 别有空格和换行  -->
  <div id="box" class="box">
    <h2>我是h2</h2>
  </div>

  <span>我是span</span>
  <a href="#">我是a</a>
</body>
<script>
  // 对dom 节点进行操作
  let div1 = document.querySelector("#d1")
  let a1 = document.querySelector("#a1")
  // 创建了一个节点
  let pnode = document.createElement("p")
  let textnode = document.createTextNode("我是p的文本")
  // doc 文本元素
  // document.write('学习js')
  // dom 对象
  let divEle = document.querySelector(".box")
  let aEle = document.querySelector("a")
  let span = document.querySelector("span")
  let h2 = document.querySelector("h2")
  // 赋给文本节点
  divEle.innerText = "喜欢学习js"
  console.log(divEle.innerText);
  // 只能是字,标签也变成文本
  divEle.innerText = '<h1>玩游戏</h1>'
  console.log(divEle.innerHTML);
  divEle.innerHTML = '<h1>玩游戏</h1>'
  // 可以添加子节点多个,
  divEle.append(aEle, span)
  // 添加子类 1个
  divEle.appendChild(aEle)

  // 添加到子类的前边 
  divEle.prepend(aEle, span)
  // 在我后边
  divEle.after(h2)
  // 在我前边
  divEle.before(h2)
  // span 用什么来替换
  span_dom.replaceWith(div_dom)
  // 删除子类
  divEle.removeChild(pEle)
  chd_arr[i].remove()


</script>

</html>